<template>
     <div class="declareFinish container">
        <div class="finish_list">
            <div class="tabCommonTitle">
                <span>材料确认</span>
            </div>
            <div class="tableForm">
                <table style="text-align:center;" width="1110" border="" cellspacing="0" align="center" cellpadding="">
                    <tr>
                        <td width="180">申报单位：</td>
                        <td colspan="3" class="td_text">{{sbdw_qymc}}</td>
                    </tr>
                    <tr>
                        <td width="180">推荐单位：</td>
                        <td colspan="3" class="td_text">{{tjdw}}</td>
                    </tr>
                    <tr>
                        <td width="180">成果名称：</td>
                        <td colspan="3" class="td_text">{{cxjMcZw}}</td>
                    </tr>
                    <tr>
                        <td width="180">成果申报类别 ：</td>
                        <td width="350" class="td_text">{{fl_mc}}</td>
                        <td width="240">成果来源 ：</td>
                        <td width="340" class="td_text">{{cxjXmly}}</td>
                    </tr>
                    <tr>
                      <td width="180">成果研究起始时间：</td>
                      <td width="350" class="td_text">{{cxjQssj}}</td>
                      <td width="240">成果研究完成时间：</td>
                      <td width="340" class="td_text">{{cxjWcsj}}</td>
                    </tr>
                    <tr>
                      <td width="180"><i>*</i>申报单位联系人：</td>
                      <td colspan="3" class="td_text">{{lxrXm}},{{lxrSj}}</td>
                    </tr>
                    <tr>
                        <td width="180"><i>*</i>完成单位：</td>
                        <td colspan="3" class="td_text">{{wcdwlist}}</td>
                    </tr>
                    <tr>
                        <td width="180"><i>*</i>完成人：</td>
                        <td colspan="3" class="td_text">{{wcrlist}}</td>
                    </tr>
                    <tr>
                        <td width="180"><i v-if="cxj_type=='11' || cxj_type == '41'">*</i>授权发明专利（项）：</td>
                        <td width="350" class="td_text">{{zscq_num}}</td>
                        <td width="240"><i v-if="cxj_type=='11' || cxj_type == '41'">*</i>其他知识产权（项）：</td>
                        <td width="340" class="td_text">{{zscq_num_qt}}</td>
                    </tr>
                    <tr>
                        <td width="180"><i>*</i>实施应用证明（项）：</td>
                        <td width="350" class="td_text">{{ssyyfj_num}}</td>
                        <td width="240">其他证明（项）：</td>
                        <td width="340" class="td_text">{{qtfj_num}}</td>
                    </tr>
                </table>
            </div>
            <div class="tableList">
                <p class="list_title">其他材料信息</p>
                <table width="1110"  align="center" cellpadding="">
                    <thead>
                        <tr>
                            <th width="200" style="text-align:left;padding-left:30px;">序号</th>
                            <th>材料名称</th>
                            <th width="220">内容要求</th>
                            <th width="150">当前字数</th>
                            <th width="150" style="text-align:center;">是否符合要求</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">1</td>
                            <td><em>*</em>成果简介</td>
                            <td>1000字以内</td>
                            <td>
                                <span v-if="xmjj_flag">{{xmjjList[0].fileNumber}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="xmjj_flag && xmjjList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">2</td>
                            <td><em>*</em>主要创新点内涵</td>
                            <td>5000字以内</td>
                            <td>
                                <span v-if="cxd_flag">{{cxdList[0].fileNumber}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="cxd_flag && cxdList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">3</td>
                            <td><em>*</em>实际应用情况</td>
                            <td>800字以内</td>
                            <td>
                                <span v-if="ssyysbb_flag">{{ssyysbbList[0].fileNumber}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="ssyysbb_flag && ssyysbbList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr v-if="cxj_type=='11' || cxj_type == '41'">
                            <td style="text-align:left;padding-left:30px;">4</td>
                            <td><em>*</em>经济效益</td>
                            <td colspan="2" style="text-align:center;">新增销售额累计：{{xzxselj}}万元</td>
                            <td style="text-align:center;">
                                <span v-if="jjxy_flag">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr v-else>
                          <td style="text-align:left;padding-left:30px;">4</td>
                          <td>经济效益</td>
                          <td colspan="2" style="text-align:center;">新增销售额累计：{{xzxselj}}万元</td>
                          <td style="text-align:center;">
                                <span>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                          </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">5</td>
                            <td><em>*</em>社会效益与间接经济效益</td>
                            <td>500字以内</td>
                            <td>
                                <span v-if="shxy_flag">{{shxyList[0].fileNumber}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="shxy_flag && shxyList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">6</td>
                            <td>曾获奖励情况</td>
                            <td>非必填项</td>
                            <td>
                                <span v-if="chjj_flag">{{chjj_num}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="chjj_flag">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;padding-left:30px;">7</td>
                            <td><em>*</em>研究报告</td>
                            <td>2万字以内</td>
                            <td>
                                <span v-if="yjbg_flag">{{yjbgList[0].fileNumber}}字</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="yjbg_flag && yjbgList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr v-if="cxj_type=='11'||cxj_type=='41'">
                            <td style="text-align:left;padding-left:30px;">8</td>
                            <td><em>*</em>第三方评价证明</td>
                            <td>至少一项</td>
                            <td>
                                <span v-if="dsfpj_flag">{{dsfpj_num}}项</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="dsfpj_flag">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr>
                        <tr v-else>
                            <td style="text-align:left;padding-left:30px;">8</td>
                            <td>第三方评价证明</td>
                            <td>非必填项</td>
                            <td>
                                <span v-if="dsfpj_flag">{{dsfpj_num}}项</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <!-- <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span> -->
                            </td>
                        </tr>
                        <!-- <tr>
                            <td style="text-align:left;padding-left:30px;">9</td>
                            <td><em>*</em>单位意见</td>
                            <td>必须上传</td>
                            <td>
                                <span v-if="dwyj_flag">1项</span>
                                <span v-else>未上传</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="dwyj_flag && dwyjList[0].isValid">
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/success.png" alt="">
                                </span>
                                <span v-else>
                                    <img style="width:18px;height:18px;margin-right:11px;" src="@/assets/img/fail.png" alt="">
                                </span>
                            </td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <div class="btnList">
                <div class="submit_btn pointer" @click="submit_sb" v-if="sbztbh=='100'">材料确认</div>
                <div class="submit_btn" :class="sbztbh == '100' ? '' : 'disabled'" v-else-if="sbztbh != '100'">材料已确认</div>
              <!-- -->
                <div
                    style="position: relative;"
                    class="submit_btn pointer"
                    :class="sbztbh !== '100' ? '' : 'disabled'"
                    @click="sbztbh != '100' ? exportDeclarationForm() : ''"
                >
                    导出申报表
                    <span style="color: #cb0c0c;position: absolute;bottom: -50px;z-index: 9;display: block; width: 250px; text-align: center;">材料确认后可下载申报表</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {
    cxjsb_getZlqr,
    cxjsb_zlqr,
    cxjsbCglylist,
    cxjsbValidlist,
    cxjsbGetCxjByid,
    cxjsbDownloadSbbmb
} from '@/api/shenbao';
import { mapActions } from 'vuex'
export default {
    name: 'MaterialConfirm',
    data() {
        return {
            cxj_cxj_id: '',
            cglylist: [],
            cxjXmly: '',
            validlist: [],
            fl_mc: '',
            sbwc: {},
            sbdw_qymc: '',
            tjdw: '',
            cxjMcZw: '',
            wcdwlist: '',
            wcrlist: '',
            zscq_num: '',
            zscq_num_qt: '',
            ssyyfj_num: '',
            qtfj_num: '',
            cxjQssj: '',
            cxjWcsj: '',
            xmjjList: [],
            xmjj_flag: '',
            cxdList: [],
            cxd_flag: '',
            ssyysbbList: [],
            ssyysbb_flag: '',
            jjxyList: [],
            jjxy_flag: '',
            shxyList: [],
            shxy_flag: '',
            chjj_flag: '',
            chjj_num: '',
            yjbgList: '',
            yjbg_flag: '',
            dsfpj_flag: '',
            dwyjList: [],
            dwyj_flag: '',
            lxrXm: [],
            lxrSj: [],
            xzxselj: '',
            sbztbh: '',
            cxj_type: '',
        }
    },
    props: ['is_modify'],
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        // 导出申报表
        exportDeclarationForm() {
            let that = this;
            let data = {
                cxj_cxj_id: that.$route.query.cxj_cxj_id
            }
            cxjsbDownloadSbbmb(data).then(res=>{
                that.downfn('申报表', res);
            })
        },
        downfn(title, res) {
            const data = res.data;
            const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url;
            link.setAttribute('download', title + '.pdf')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        },
        initdata() {
            this.sbdw_qymc = this.sbwc.sbtjdw && this.sbwc.sbtjdw.sbdw_qymc;
            this.tjdw = this.sbwc.sbtjdw && this.sbwc.sbtjdw.tjdw;
            this.cxjMcZw = this.sbwc.cxj.cxjMcZw;
            this.wcdwlist = this.sbwc.wcdwMap && this.sbwc.wcdwMap.wcdwlist;
            this.wcrlist = this.sbwc.wcrMap && this.sbwc.wcrMap.wcrlist;
            this.zscq_num = this.sbwc.zscq_num;
            this.zscq_num_qt = this.sbwc.zscq_num_qt;
            this.ssyyfj_num = this.sbwc.ssyyfj_num;
            this.dsfpj_num = this.sbwc.dsfpj_num;
            this.qtfj_num = this.sbwc.qtfj_num;
            this.cxjQssj = this.sbwc.cxj.cxjQssj;
            this.cxjWcsj = this.sbwc.cxj.cxjWcsj;
            this.xmjjList = this.sbwc.xmjjList;
            this.xmjj_flag = this.sbwc.xmjj_flag;
            this.cxdList = this.sbwc.cxdList;
            this.cxd_flag = this.sbwc.cxd_flag;
            this.ssyysbbList = this.sbwc.ssyysbbList;
            this.ssyysbb_flag = this.sbwc.ssyysbb_flag;
            this.jjxyList = this.sbwc.jjxyList;
            this.jjxy_flag = this.sbwc.jjxy_flag;
            this.shxyList = this.sbwc.shxyList;
            this.shxy_flag = this.sbwc.shxy_flag;
            this.chjj_flag = this.sbwc.chjj_flag;
            this.chjj_num = this.sbwc.chjj_num;
            this.yjbgList = this.sbwc.yjbgList;
            this.yjbg_flag = this.sbwc.yjbg_flag;
            this.dsfpj_flag = this.sbwc.dsfpj_flag;
            this.dwyjList = this.sbwc.dwyjList;
            this.dwyj_flag = this.sbwc.dwyj_flag;
            this.lxrXm = this.sbwc.sblxrList && this.sbwc.sblxrList[0] && this.sbwc.sblxrList[0].lxrXm;
            this.lxrSj = this.sbwc.sblxrList && this.sbwc.sblxrList[0] && this.sbwc.sblxrList[0].lxrSj;
            this.xzxselj = this.sbwc.xzxselj;
        },
        get_cxjsb_getZlqr() {
            let that = this;
            cxjsb_getZlqr({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                console.log(res, 'res');
                if (res.data.code == '200') {
                    this.sbwc = res.data.result;
                    this.getCxjsbCglylist();
                    this.getCxjsbValidlist();
                    this.initdata();
                }
            })
        },
        getCxjsbCglylist(){
            cxjsbCglylist().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.cglylist = data.result;
                    for (var i=0;i<this.cglylist.length;i++) {
                        if (this.sbwc.cxj.cxjXmly == this.cglylist[i].cglyBh) {
                            this.cxjXmly =  this.cglylist[i].cglyMc;
                        }
                    }
                }
            })
        },
        getCxjsbValidlist(){
            cxjsbValidlist().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.validlist = data.result;
                    for (var i=0;i<this.validlist.length;i++) {
                        if (this.sbwc.cxj.flId == this.validlist[i].fl_id) {
                            this.fl_mc =  this.validlist[i].fl_mc;
                        }
                    }
                }
            })
        },
        submit_sb() {
            let that = this;
            this.$confirm({
                content: '确认后材料将不可修改，是否进行材料确认？',
                onOk() {
                    cxjsb_zlqr(that.cxj_cxj_id).then(res=>{
                        if (res.data.code == '200') {
                            that.$message.success('提交成功');
                            that.getStatus(that.cxj_cxj_id)
                            that.getCxjsbGetCxjByid();
                            that.$parent.getCxjsbGetCxjByid();
                        } else {
                            that.$message.error(res.data.message)
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    that.destroyAll();
                },
            });
        },
        destroyAll() {
            this.$destroyAll();
        },
        getCxjsbGetCxjByid(){
            cxjsbGetCxjByid({
                cxj_cxj_id: this.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.sbztbh = data.result.sbztbh;
                    // this.sbztbh = '101';
                }
            })
        },
    },
    mounted() {
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.cxj_type = this.$route.query.type;
        this.get_cxjsb_getZlqr();
        this.getCxjsbGetCxjByid();
    }
}
</script>
<style lang="less">
    td {
        input {
            width: 100%;
            height: 100%;
            border: 0;
            outline: 0;
        }
    }
    .ant-select-selection {
        border: 0;
    }
    .ant-select-selection__rendered {
        margin-left: 0;
        line-height: 40px;
    }
    .ant-select, .ant-select-selection, .ant-select-selection__rendered {
        width: 100%!important;
        height: 100%!important;
    }
    .ant-select-selection-selected-value {

        padding-left: 11px;
    }
    .ant-calendar-picker {
        width: 100%;
        height: 100%;
        div {
            width: 100%;
            height: 100%;
            input {
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
            }
        }
    }
</style>
<style lang="less" scoped>
.tableForm {
    margin-top: 11px;
    table {
        border: 1px solid #ECEBEB;
        tr {
            height: 40px;
            td {
                color: #333333;
                font-size: 14px;
                font-weight: 400;
                i {
                    color: #CB0C0C;
                    margin-right: 5px;
                }
                &.td_text {
                    text-align: left;
                    padding: 0 20px;
                }
                input {
                    width: 100%;
                    height: 100%;
                    border: 0;
                    outline: 0;
                }
            }
        }
    }
}
.list_title {
    height: 22px;
    font-size: 16px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    color: #3388EE;
    line-height: 22px;
    text-align: center;
}
.tableList {
    margin-top: 27px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 54px;
                    font-size: 16px;
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    font-weight: bold;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                    em {
                        color: #CB0C0C;
                        margin-right: 5px;
                        font-style: normal;
                    }
                    i {
                        &.anticon-check-circle {
                            color: #67C235;
                        }
                        &.anticon-close-circle {
                            color: #CB0C0C;
                        }
                    }
                }
                &:nth-child(even){
                    background: #F5F5F5;
                }
            }
        }
    }
}
.btnList {
    display: flex;
    justify-content: space-around;
    padding: 0 240px;
}
</style>
